<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>九宫格抽奖demo</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1">

    <script src="index.js"></script>
    <style>
        .luck-box {
            width: 640px;
            height: 582px;
            margin: 50px auto 0;
            padding: 24px;
        }

        .luck-draw {
            width: 600px;
        }

        .luck-draw .luck-draw-item {
            height: 176px;
            width: 196px;
            background: linear-gradient(120deg, #ee614a, #ff6951);
            text-align: center;
            -webkit-box-sizing: border-box;
            margin: 0 2px 2px 0;
            font-size: 0;
            float: left;
        }

        .luck-draw .luck-draw-item:nth-child(2n) {
            background: linear-gradient(120deg, #db3f3f, #ed4444);
        }

        .luck-draw .luck-draw-start {
            background: url(start.jpg) no-repeat center center;
            background-size: contain;
            cursor: pointer;
        }

        .luck-draw .luck-draw-item-icon {
            width: 95%;
            margin: .3rem auto 0;
            height: 70%;
            display: inline-block;
        }

        .luck-draw .luck-draw-item-icon img {
            max-height: 90%;
            max-width: 100%;
            border-radius: 6px;
            margin: 18px 0;
            display: inline-block;
            background: #ffb4b4;
            width: 90px;
            height: 90px;
        }

        .luck-draw .luck-draw-item-name {
            color: #fff;
            padding-top: 8px;
            font-size: 16px;
            display: block;
        }

        .luck-draw .luck-draw-item-active {
            background: #ffb000 !important;
        }

        .test {
            width: 350px;
            margin: 0 auto;
        }

        .test input {
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 10px;
            width: 200px;
        }

        .test button {
            border: 1px solid #ddd;
            padding: 9px;
            border-radius: 10px;
            width: 76px;
        }
    </style>
</head>

<body>
    <div id="luck-box" class="luck-box">

    </div>
    <div class="test">
        <div class="info">

        </div>
        <input placeholder="输入抽奖序号" id="prize" />
        <button id="start">开始抽奖</button>
    </div>
    <script>
        var data = [
            { title: '1号奖品', icon: '', index: 1 },
            { title: '2号奖品', icon: '', index: 2 },
            { title: '4号奖品', icon: '', index: 4 },
            { title: '5号奖品', icon: '', index: 5 },
            { title: '6号奖品', icon: '', index: 6 },
            { title: '3号奖品', icon: '', index: 3 },
            { title: '7号奖品', icon: '', index: 7 },
            { title: '8号奖品', icon: '', index: 8 },
        ];
        var luck = new luckDraw({
            id: 'luck-box',
            autoLuck: false,
            // prize: 7,
            data: data,
            callBack: function () {
                var prize = document.querySelector('#prize').value
                setTimeout(() => {
                    alert('恭喜你抽中' + prize + '号奖品')
                }, 0);
            }
        })
        // luck.start()  //开始
        document.querySelector('#start').addEventListener('click', function () {
            var prize = document.querySelector('#prize').value
            prize = Number(prize)
            if (prize > 8 || prize < 1 || isNaN(prize)) {
                return alert('奖品序号1-8数字')
            }
            luck.prize = prize
            luck.start()
        })
    </script>
</body>

</html>